<template>
  <div>
    <div @click="openPicker($event)" class="weui-cell_access">
      <div class="select-box weui-cell__ft vux-cell-primary" style="padding: 9px 0">
        <div class="left showValue" v-if="value1.length > 0">
          <span>{{ checkData.name }}</span>
        </div>
        <div class="left" v-else>
          <span style="color: #c9cdd4">{{ placeholder ? placeholder : "请选择" }}</span>
        </div>
      </div>
      <slot :value="checkData"></slot>
    </div>
    <popup-picker
      :show.sync="showPopupPicker"
      :show-cell="false"
      confirm-text="确定"
      :data="dataList"
      v-model="value1"
      @on-show="onShow"
      @on-hide="onHide"
      @on-change="onChange"
    ></popup-picker>
  </div>
</template>

<script>
import {PopupPicker, Datetime, Group} from "vux";
import bpmService from "@/service/bpm/bpmService";
import Vue from "vue";

export default {
  components: {
    PopupPicker,
    Datetime,
    Group,
  },
  props: {
    // type: {
    //   type: String,
    //   default: ''
    // },
    // 如为多列选择器则放多个数组
    // datalist: {
    //   type: Array,
    //   default: () => [[]]
    // },
    dialogKey: {
      type: String,
      default: "",
    },
    pickerData: {
      type: [Array, String, Number],
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    param: {
      type: Object,
      default: () => {
      },
    },
    initParam: {
      type: Object,
      default: () => {
      },
    },
    opVal: {
      type: String,
      default: "key",
    },
    opTxt: {
      type: String,
      default: "name",
    },
    isTimer: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: [Boolean, String],
      default: false,
    },
  },
  model: {
    prop: "pickerData",
    event: "handleChange",
  },
  // watch: {

  // },
  data() {
    return {
      value1:
        typeof this.pickerData == "string"
          ? this.pickerData
            ? [this.pickerData]
            : []
          : this.pickerData,
      checkData: {},
      date: "",
      showPopupPicker: false,
      dataList: [],
      queryParam: {},
      timer: null,
    };
  },
  mounted() {
    this.getDictInfo();
  },
  methods: {
    openPicker(vnode) {
      if (this.disabled || vnode.target.disabled) return;
      this.showPopupPicker = true;
    },
    getQueryParam: function (param) {
      if (!param) return {};

      if (this.initParam) {
        for (var key in this.initParam) {
          if (!param[key] && this.initParam[key]) {
            //为空取默认值
            param[key] = this.initParam[key];
          }
        }
      }
      return param;
    },
    getDictInfo() {
      var query = this.getQueryParam(this.param);
      if (JSON.stringify(this.queryParam) === JSON.stringify(query)) {
        return;
      }
      // debugger
      this.queryParam = query;
      var defer = this.baseService.postForm(
        this.__ctx + "/form/formCustDialog/queryListData_" + this.dialogKey,
        query
      );
      let that = this;
      defer.then((res) => {
        if (res.isOk) {
          if (res.rows.length > 0) {
            let dataList = res.rows;
            let checkList = [];
            dataList.forEach((v, i) => {
              let obj = v;
              checkList.push(v[that.opVal]);
              obj.name = v[that.opTxt];
              obj.value = v[that.opVal];
              dataList[i] = obj;

              if (that.value1.length > 0) {
                if (v[that.opVal] == that.value1[0]) {
                  that.checkData = v;
                }
              }
            });
            if (checkList.indexOf(that.checkData.value) == -1) {
              that.checkData = {};
              // 切换后清空下级选中的  防止没选择校验依然通过
              that.$emit("handleChange", '');
            }
            // debugger
            that.dataList = [dataList];
            // console.log(dataList)
          } else {
            this.checkData = {};
            this.dataList = [[]];
          }
        }
      });
    },
    onChange(val) {
      let dataList = this.dataList[0];
      let value = val[0];
      let data = {};
      let that = this;
      dataList.forEach((v, i) => {
        if (v[that.opVal] == value) {
          data = v;
        }
      });
      this.checkData = {
        ...data,
        ...{name: data[that.opTxt], value: data[that.opVal]},
      };
      // let value = this.valueDispose(val)
      this.$emit("handleChange", data[that.opVal]);
    },
    onShow() {
      this.$emit("handleShow");
    },
    onHide(type) {
      this.$emit("handleHide", type);
    },
    valueDispose(arr) {
      return arr.join(" ");
    },
  },
  watch: {
    pickerData(val) {
      //this.value1 = typeof val == 'string' ? val ? [val] : [] : val
    },
    param: function (newVal, oldVal) {
      if (!this.isTimer) {
        this.getDictInfo();
        return;
      }
      if (this.timer) {
        clearTimeout(this.timer); //关闭定时器，也就是说在0.5内还有变化，就吞掉上一个定时器-。-
      }
      var that = this;
      //0.5秒后才执行
      this.timer = setTimeout(function () {
        this.getDictInfo();
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.select-box {
  .showValue {
    color: #000000;
    font-size: 17px;
  }

  .left_placeholder {
    color: rgb(201, 205, 212);
    font-family: HarmonyOS Sans SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
  }

  .right-icon {
    color: rgb(201, 205, 212);
  }
}
</style>
